<script setup lang='ts'>
import { ref } from 'vue'
let searchData = ref({
    name: '',
})
//获取时间
let nowTime = Date.now()
let nowTimer = new Date(nowTime).toLocaleString().replace(/\//g, "-") //使用转译字符 '\'将 / 转译为 '/' 
//tabel的数据
const tableData = [
    {
        id: '1',
        name: '风风',
        time: nowTimer,
    },
    {
        id: '4',
        name: '坤坤',
        time: nowTimer,
    },
    {
        id: '7',
        name: '林林',
        time: nowTimer,
    },
    {
        id: '3',
        name: '火火',
        time: nowTimer,
    },
    {
        id: '2',
        name: '山山',
        time: nowTimer,
    },
    {
        id: '6',
        name: '长生',
        time: nowTimer,
    },
]
//当前页码
let currentPage = ref<number>(1)
//每页显示数据个数
let pageSize = ref<number>(6)
</script>

<template>
    <div class="container">
        <el-card style="height: 80px">
            <el-form style="margin-top: 5px;display: flex; justify-content: space-between;" v-model="searchData.name">
                <el-form-item label="用户名">
                    <el-input placeholder="请输入用户名" style="width: 300px;margin-right: 300px" v-model="searchData.name">
                    </el-input>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="card">
            <el-card style="margin-top: 30px">
                <div class="btn">
                    <el-button type="primary">
                        添加用户
                    </el-button>
                    <el-button type="danger">
                        批量删除
                    </el-button>
                </div>

                <el-table :data="tableData" border style="width: 100%;margin-bottom: 10px" type>
                    <el-table-column type="selection" align="center"></el-table-column>
                    <el-table-column label="序号" align="center" type="index"></el-table-column>
                    <el-table-column label="id" align="center">
                        <template #="{ row }">
                            {{ row.id }}
                        </template>
                    </el-table-column>
                    <el-table-column label="用户名" align="center">
                        <template #="{ row }">
                            {{ row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center">
                        <template #="{ row }">
                            {{ row.time }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template #="{ row, $index }">
                            <el-button type="primary" icon="Edit"
                                style="margin-right: 12px;margin-left: 0">编辑</el-button>
                            <el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="取消"
                                icon="InfoFilled" icon-color="#626AEF" :title="`你确定要删除${row.name}吗？`">
                                <template #reference>
                                    <el-button type="danger" icon="Delete"
                                        style="margin-right: 12px;margin-left: 0">删除</el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" small="small"
                    background=true layout="prev, pager, next, jumper,->,sizes,total"
                    :total="100" @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                    :page-sizes="[4,6,8]"/>
            </el-card>
        </div>

    </div>
</template>


<style lang="less" scoped>
.btn {
    margin-bottom: 20px;
}
</style>